<template>
    <view>
        <view v-if="type != 'xx'"
              :class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute': '', navShadow ? 'header_shadow': '', themeBgColorName]"
              :style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue}]">
            <view class="header_content">
                <view class="header_left_box">
                    <slot name="left">
                        <view class="header_left_info"
                              :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
                              v-if="back || $slots.left || home">
                            <view class="header_left_back"
                                  :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]"
                                  v-if="back && !firstPage"
                                  @click="onBackPage">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_back_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_back_black.png"
                                       mode="aspectFit"></image>
                            </view>
                            <text class="header_left_line"
                                  :class="[isWhite ? 'header_colorWhite_left_line' : '']"
                                  v-if="isTwoBtn"></text>
                            <view class="header_left_home"
                                  :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
                                  v-if="(firstPage && back) || home"
                                  @click="onBackHome">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_home_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_home_black.png"
                                       mode="aspectFit"></image>
                            </view>
                        </view>

                    </slot>
                    <view class="header_title"
                          v-if="!titleCenter && ($slots.default || navTitle)"
                          :style="{ color: navFontColor }">
                        <slot>
                            <text :style="{ color: navFontColor }">{{ navTitle }}</text>
                        </slot>
                    </view>
                </view>
                <view class="header_title header_title_center"
                      v-if="titleCenter && ($slots.default || navTitle)"
                      :style="{ color: navFontColor }">
                    <slot>
                        <text :style="{ color: navFontColor }">{{ navTitle }}</text>
                    </slot>
                </view>
                <view class="header_right_info">
                    <slot name="right"></slot>
                </view>
            </view>
        </view>

        <view v-if="type=='xx'"
              :class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute': '', navShadow ? 'header_shadow': '', themeBgColorName]"
              :style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue}]">
            <view class="header_content">
                <view class="header_left_box">
                    <slot name="left">
                        <view class="header_left_info"
                              :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
                              v-if="back || $slots.left || home">
                            <view class="header_left_back"
                                  :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]"
                                  v-if="back && !firstPage"
                                  @click="onBackPage">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_back_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_back_black.png"
                                       mode="aspectFit"></image>
                            </view>
                            <text class="header_left_line"
                                  :class="[isWhite ? 'header_colorWhite_left_line' : '']"
                                  v-if="isTwoBtn"></text>
                            <view class="header_left_home"
                                  :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
                                  v-if="(firstPage && back) || home"
                                  @click="onBackHome">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_home_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_home_black.png"
                                       mode="aspectFit"></image>
                            </view>
                        </view>
                        <view class="header_left_info"
                              :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
                              v-if="back || $slots.left || home">
                            <image @click="guanbi"
                                   style="width: 48rpx;height: 48rpx;"
                                   src="/static/nav_icon_close.png"></image>
                        </view>

                    </slot>
                    <view class="header_title"
                          v-if="!titleCenter && ($slots.default || navTitle)"
                          :style="{ color: navFontColor }">
                        <slot>
                            <text :style="{ color: navFontColor }">{{ navTitle }}</text>
                        </slot>
                    </view>
                </view>
                <view class="header_title header_title_center"
                      v-if="titleCenter && ($slots.default || navTitle)"
                      :style="{ color: navFontColor }">
                    <slot>
                        <text :style="{ color: navFontColor }">{{ navTitle }}</text>
                    </slot>
                </view>
                <view class="header_right_info">
                    <slot name="right"></slot>
                </view>
            </view>
        </view>

        <view class="header_transparentFixed header_fixed"
              v-if="type == 'transparentFixed'"
              :style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90}">
            <view class="header_content">
                <view class="header_left_box">
                    <slot name="transparentFixedLeft">
                        <view class="header_left_info header_transparentFixed_left_info"
                              :class="[ isWhite ? 'header_transparentFixed_colorWhite_left_info' : '' ]"
                              v-if="back || $slots.left || home">
                            <view class="header_left_back"
                                  :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]"
                                  v-if="back && !firstPage"
                                  @click="onBackPage">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_back_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_back_black.png"
                                       mode="aspectFit"></image>
                            </view>
                            <text class="header_left_line"
                                  v-if="isTwoBtn"></text>
                            <view class="header_left_home"
                                  :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
                                  v-if="(firstPage && back) || home"
                                  @click="onBackHome">
                                <image class="header_icon"
                                       v-if="isWhite"
                                       src="/static/zhouWei-navBar/icon_home_white.png"
                                       mode="aspectFit"></image>
                                <image class="header_icon"
                                       v-else
                                       src="/static/zhouWei-navBar/icon_home_black.png"
                                       mode="aspectFit"></image>
                            </view>
                        </view>
                    </slot>
                    <view class="header_title"
                          v-if="!titleCenter && (navTitle || $slots.transparentFixed)"
                          :style="{ color: navTransparentFixedFontColor }">
                        <slot name="transparentFixed">
                            <text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
                        </slot>
                    </view>
                </view>
                <view class="header_title header_title_center"
                      v-if="titleCenter && (navTitle || $slots.transparentFixed)"
                      :style="{ color: navTransparentFixedFontColor }">
                    <slot name="transparentFixed">
                        <text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
                    </slot>
                </view>
                <view class="header_right_info">
                    <slot name="transparentFixedRight"></slot>
                </view>
            </view>
        </view>
        <view v-if="type == 'fixed'"
              :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="header_station"></view>
        </view>
    </view>
</template>
<script>
// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
const mainPagePath = ['pages/home/home', 'pages/my/my', 'pages/demo/common', 'pages/template/common', 'pages/apiDemo/common'];
//返回首页的地址
const homePath = '/pages/index/index';
//白色表达值
const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
export default {
    props: {
        //是否显示返回按钮
        // 1000 显示返回按钮
        // 2000 不显示返回按钮
        // 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
        backState: {
            type: [String, Number],
            default: function () {
                return 1000;
            }
        },
        //是否显示返回首页按钮
        // 1000 显示首页按钮
        // 2000 不显示首页按钮
        // 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
        homeState: {
            type: [String, Number],
            default: function () {
                return 2000;
            }
        },
        //导航背景色，支持渐变
        bgColor: {
            type: [String, Array],
            default: function () {
                return '#FFFFFF';
            }
        },
        // 导航背景色渐变角度
        bgColorAngle: {
            type: [String, Number],
            default: function () {
                return 90;
            }
        },
        //导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
        fontColor: {
            type: String,
            default: function () {
                return '#000000';
            }
        },
        //标题是否居中
        titleCenter: {
            type: Boolean,
            default: function () {
                return true;
            }
        },
        //标题
        title: {
            type: String,
            default: function () {
                return '';
            }
        },
        //类型 fixed为固定 默认
        // ordinary 普通的 不固定
        // transparent 透明不固定的
        //transparentFixed  透明固定的
        type: {
            type: String,
            default: function () {
                return 'fixed';
            }
        },
        //透明固定的时候字体颜色
        transparentFixedFontColor: {
            type: String,
            default: function () {
                return '#000000';
            }
        },
        // 屏幕滑动距离顶部距离(透明固定导航比传)
        scrollTop: {
            type: Number,
            default: function () {
                return 0;
            }
        },
        // 是否显示阴影
        shadow: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
        // 屏幕滑动距离透明度
        transparentScrollTop: {
            type: Number,
            default: function () {
                return 60;
            }
        },
    },
    data() {
        return {
            //当前页面是否是第一个页面
            firstPage: false,
            //透明度值
            transparentValue: 1,
            //标题
            navTitle: '',
            //字体色
            navFontColor: '#000000',
            //背景色
            navBgColor: '',
            //透明底字体色
            navTransparentFixedFontColor: '#000000',
            // 导航栏高度
            statusBarHeight: 0,
            // 上次显示的导航栏颜色
            lastFrontColor: '',
            themeBgColorName: '',
        };
    },
    computed: {
        back() {
            return this.backState == 1000 || this.backState == 3000;
        },
        home() {
            return this.homeState == 1000;
        },
        backClick() {
            console.log(54)
        },
        //导航固定
        navFixed() {
            if (this.type == 'transparentFixed' || this.type == 'fixed') {
                return true;
            } else {
                return false;
            }
        },
        //导航底部线是否显示
        navShadow() {
            if (this.bgColor && typeof this.bgColor == 'string') {
                return this.shadow && this.type !== 'transparent' && whiteList.includes(this.bgColor);
            } else {
                return false;
            }
        },
        //导航字体是否是白色颜色
        isWhite() {
            return whiteList.includes(this.navFontColor);
        },
        //右上角是否有两个按钮
        isTwoBtn() {
            return (this.backState == 1000 || this.backState == 3000) && this.homeState == 1000 && !this.firstPage;
        }
    },
    watch: {
        title(val) {
            this.navTitle = val;
        },
        fontColor(val) {
            this.navFontColor = val;
            this.settingColor();
        },
        bgColor(val) {
            this.getNavBgColor(val);
        },
        transparentFixedFontColor(val) {
            this.navTransparentFixedFontColor = val;
        },
        scrollTop(val) {
            this.pageScroll({
                scrollTop: val
            });
        }
    },
    //第一次加载
    created() {
        this.navTitle = this.title;
        this.navFontColor = this.fontColor;
        this.getNavBgColor(this.bgColor);
        this.navTransparentFixedFontColor = this.transparentFixedFontColor;
        //获取手机状态栏高度
        this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        const _this = this;
        this.pageScroll({
            scrollTop: this.scrollTop
        });
        //获取所有页面
        let currentPages = getCurrentPages();
        let pageLen = currentPages.length;
        //判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
        if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
            this.firstPage = true;
        }
    },
    //方法
    methods: {
        //返回上一页面
        onBackPage() {
            if (this.backState == 3000) {
                console.log(222227342678)
                uni.navigateBack({
                    delta: 2
                });
                // uni.navigateBack();
                // this.$emit('backClick');
            } else {
                uni.navigateBack();
            }
        },
        //返回首页
        onBackHome() {
            if (this.homeState == 3000) {
                this.$emit('homeClick');
            } else {
                uni.reLaunch({
                    url: homePath
                });
            }
        },
        //返回松果页面
        guanbi() {
            uni.navigateTo({
                url: '../integralList/integralList',
            });
        },
        pageScroll(e) {
            if (this.type == 'transparentFixed') {
                if (e.scrollTop && e.scrollTop > 0) {
                    if (e.scrollTop > this.transparentScrollTop) {
                        this.transparentValue = 1;
                    } else {
                        this.transparentValue = e.scrollTop / this.transparentScrollTop;
                    }
                } else {
                    this.transparentValue = 0;
                }
                this.settingColor();
            }
        },
        // 获取导航背景颜色
        getNavBgColor(val) {
            if (typeof val == 'string') {
                if (this.type == 'transparent') {
                    this.navBgColor = '';
                } else if (val.indexOf('#') === -1) {
                    this.themeBgColorName = val;
                    this.navBgColor = '';
                } else {
                    this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
                }
            } else if (Array.isArray(val) && val.length >= 2) {
                let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
                val.forEach(item => {
                    if (typeof item == 'string') {
                        navBgColor += ',' + item;
                    } else if (typeof item == 'object') {
                        navBgColor += ',' + item.color + ' ' + item.scale;
                    }
                });
                navBgColor += ')';
                this.navBgColor = navBgColor;
            }
        },
        //设置手机状态栏颜色
        settingColor() {
            let navColor = this.navFontColor;
            if (this.type == 'transparentFixed' && this.transparentValue <= 0.5) {
                navColor = this.navTransparentFixedFontColor;
            }
            let frontColor = '#000000';
            if (whiteList.includes(navColor)) {
                frontColor = '#ffffff';
            }
            if (this.lastFrontColor == frontColor) {
                return;
            }
            setTimeout(() => {
                this.lastFrontColor = frontColor;
                // 改变手机状态栏颜色
                uni.setNavigationBarColor({
                    frontColor: frontColor,
                    backgroundColor: '#FFFFFF'
                });
            }, 150);
        }
    }
};
</script>
<style lang="scss">
.header_content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    /* #ifdef MP */
    padding-right: 190rpx;
    box-sizing: border-box;
    /* #endif */
    width: 750rpx;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    height: 88rpx;
    position: relative;
}

.header_station {
    height: 88rpx;
}

.header_shadow {
    // border-style: solid;
    // border-width: 2rpx;
    // border-color: #f5f5f5;
    box-shadow: 0 0 6rpx 0 #ddd;
}

.header_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    z-index: 99;
}

.header_absolute {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 750rpx;
    background-color: transparent !important;
}

.header_left_box {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    height: 88rpx;
    flex: 1;
}

.header_left_line {
    height: 30rpx;
    width: 2rpx;
    background-color: rgba(255, 255, 255, 0.4);
}

.header_left_back {
    width: 56rpx;
    height: 100%;
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
}

.header_icon {
    width: 40rpx;
    height: 40rpx;
}

.header_left_home {
    width: 56rpx;
    height: 100%;
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
}

.header_left_info {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    height: 56rpx;
    margin-left: 16rpx;
}

.header_title {
    height: 88rpx;
    font-size: 32rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-weight: 700;
    text-overflow: ellipsis;
    /* #ifndef APP-PLUS-NVUE */
    white-space: nowrap;
    display: flex;
    overflow: hidden;
    /* #endif */
    /* #ifdef APP-PLUS-NVUE */
    lines: 1;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* #ifdef MP */
    max-width: calc(100vw - 160rpx);
    /* #endif */
}

.header_title_center {
    position: absolute;
    bottom: 0rpx;
    left: 375rpx;
    transform: translateX(-50%);
}

.header_right_info {
    height: 88rpx;
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    flex-shrink: 0;
    /* #endif */
    flex-direction: row;
    align-items: center;
}

.header_btnMongol {
    border-radius: 33rpx;
    border-style: solid;
    border-width: 2rpx;
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.7);
    /* #ifndef APP-PLUS-NVUE */
    box-sizing: border-box;
    /* #endif */
}

.header_btnMongol_left_back,
.header_btnMongol_left_home {
    width: 70rpx;
}

.header_transparentFixed {
    border-bottom-width: 0;
    background-color: transparent;
    background-image: transparent;
}

.header_transparentFixed_left_info {
    border-style: solid;
    border-width: 2rpx;
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 33rpx;
    /* #ifndef APP-PLUS-NVUE */
    box-sizing: border-box;
    /* #endif */
}

.header_transparentFixed_colorWhite_left_info {
    border-style: solid;
    border-width: 2rpx;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
}

//颜色白色
.header_colorWhite_btnMongol {
    border-style: solid;
    border-width: 2rpx;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
}

.header_colorWhite_left_line {
    background-color: rgba(255, 255, 255, 0.3);
}
</style>
